一般來說，利用 jQuery 開發的應用程式都會搭配 HTML, CSS, JavaScript(jQuery) 輔助。因此，先學習如何利用 CSS 樣式表設計網頁的外觀，對之後再進入學習 jQuery 的課程有所幫助。
首先，可先將所有的樣式表設定集中在單一的外部檔案，並從 HTML 網頁匯入外部的 .css 檔案，如 begin.html & begin.css:
begin.html
小斑
<!DOCTYPE html>
<html>
<head>
<meta charest="UTF-8" />
<title>CSS 的基本知識</title>
<link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
<p>往後 10 天請多多指教!</p>
</body>
</html>
begin.css
p{
background-color: Yellow;
color: Red;
}
將所有的樣式表設定集中在單一的外部檔案時，只要修改這個 .css 檔案的內容就能變更整個網站的設計，這讓網站的維護變得更簡單方便了。
要從 HTML 網頁匯入外部的 .css 檔案時，可在 head 標籤底下使用 link 標籤。
<link rel="stylesheet" href="begin.css" type="text/css" />
也可將樣式表的設定寫在 .html 檔案裡。雖然大部分的作法是將樣式表的設定整理成外部檔案，但要是程式碼很簡單，有時會直接寫在 .html 檔案裡。
begin2.html
<!DOCTYPE html>
<html>
<head>
<meta charest="UTF-8" />
<title>CSS 的基本知識</title>
<style type="text/css">
p{
background-color: Yellow;
color: Red;
}
</style>
<link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
<p>往後 10 天請多多指教!</p>
</body>
</html>
begin3.html
<!DOCTYPE html>
<html>
<head>
<meta charest="UTF-8" />
<title>CSS 的基本知識</title>
<link rel="stylesheet" href="begin.css" type="text/css" />
</head>
<body>
<p style="background-color: Yellow; color: Red;">往後 10 天請多多指教!</p>
</body>
</html>
CSS 語法:
CSS 的基本構造為
哪裡的{哪個元素:怎麼處理}
如果改以艱澀一點的詞彙來解釋，就會寫成以下的內容:
選擇器{屬性名稱:屬性值}
第一步就是先利用選擇器指定套用樣式表設定的對象(元素)。接著再在中括號({...})之內撰寫套用樣式表設定的種類(屬性)以及利用冒號(:)間隔屬性的設定值。假如想將 p 標籤的背景色設定成黃色，可利用下列的語法描述:
p{background-color: Yellow;}
中括號裡頭也可同時宣告多種樣式表的設定，只需要利用分號(;)間隔樣式表的設定即可。因此我們將被景色設定成黃色之際，可同時將文字顏色設定成紅色。
p{
background-color: Yellow;
color: Red;
}
參考書籍: 一定學會 jQuery 的 36 堂關鍵課程
iThome鐵人賽
看影片追技術